/*******************右侧功能栏********************************/
var rights = document.querySelector('.fixed').children;
var fixop = rights[0];
var poption = rights[1];
var fixlis = fixop.children[0].children;
var poptionlis = poption.children;
for (let i = 0; i < fixlis.length - 1; i++) {
    fixlis[i].index = i;
    fixlis[i].addEventListener('mouseover', function () {
        poption.className = "poption";
        for (let j = 0; j < poptionlis.length; j++) {
            fixlis[j].className = "";
            poptionlis[j].style.display = "none";
        }
        poptionlis[this.index].style.top += 60 * i + 'px';
        poptionlis[this.index].style.display = 'block';
    })
}
fixop.addEventListener('mouseout', function () {
    poption.className = 'poption hide'
})
poption.addEventListener('mouseout', function () {
    poption.className = 'poption hide'
})
//回到顶部效果
$(fixlis[4]).on('click', function () {
    $('body,html').animate({
        scrollTop: 0,
    }, 300)
});
/***********************************************/
// 事件委托实现数量的加减
document.querySelector('.shoppingBar').addEventListener('click', function (event) {
    let e = event || window.event;
    // 获取到事件源中的文本内容 并且去掉空格
    let content = e.target.innerHTML.trim();
    let number, price;
    switch (content) {
        case '-':
            //获取到当前数量
            number = parseInt(e.target.nextElementSibling.innerHTML)
            if (number <= 1) {
                alert('数量最少1件');
                return false;
            }
            // 数量减1
            e.target.nextElementSibling.innerHTML = --number;
            //获取到单价
            price = parseFloat(e.target.parentNode.nextElementSibling.innerHTML);
            // 计算金额
            e.target.parentNode.nextElementSibling.nextElementSibling.innerHTML = price * number;
            total();
            break;
        case '+':
            //获取到当前数量
            number = parseInt(e.target.previousElementSibling.innerHTML);
            // 数量减1
            e.target.previousElementSibling.innerHTML = ++number;
            //获取到单价
            price = parseFloat(e.target.parentNode.nextElementSibling.innerHTML);
            // 计算金额
            e.target.parentNode.nextElementSibling.nextElementSibling.innerHTML = price * number;
            total();
            break;
        case '删除':
            e.target.parentNode.parentNode.remove();
            total();
            break;
        default:
            if (e.target.className == 'input') {
                // 勾选操作
                total();
                // 是否选中全选
                if (document.querySelectorAll('.input:checked').length == document.querySelectorAll('.input').length) {
                    document.querySelector('input').checked = true;
                } else {
                    document.querySelector('input').checked = false;
                }
            }
            break;
    }
})
// 计算总数量信息
function total() {
    // 查找被选中的input标签
    let inputs = document.querySelectorAll('.input:checked');
    let totalNumber = 0, totalMoney = 0;
    for (let i = 0; i < inputs.length; i++) {
        // 获取到当前勾选input的上上级tr标签
        let patrentTr = inputs[i].parentNode.parentNode
        // 计算总数量
        totalNumber += parseInt(patrentTr.children[2].children[1].textContent);
        // 计算总的金额
        totalMoney += parseFloat(patrentTr.children[4].textContent);
    }
    document.querySelectorAll('.buy span')[0].textContent = totalNumber;
    document.querySelectorAll('.buy span')[1].textContent = '¥' + totalMoney;
}
/***********未登录状态跳转至登录页****************/
$(function () {
    if (userInfo) {
        // 用户已经登录
        $.get(baseUrl + '/cart/lists', { userId: userInfo.id }, (res) => {
            // 调用自定义的函数实现页面上数据显示
            showUserCart(res.data);
        }, 'json');
    } else {
        // 用户没有登录
        $('.shopping .true').css("display", "none");
        $('.shopping .false').css("display", "block");
        let login = document.querySelector('.false>button');
        login.onclick = function () {
            location.href = "login.html"
        }
        // 先从localstorage中获取到购物车信息
        let userCart = localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : {};
        console.log(userCart);
        // 循环的目的是为了组装一个数组，后面发送请求
        let goodsIds = [];
        for (let key in userCart) {
            // 每一次循环key表示商品的ID
            goodsIds.push(key);
        }
        console.log(userCart);
        if (goodsIds.length > 0) {
            $.post(baseUrl + '/goods/getGoodsByIds', { goodsIds }, (res) => {
                let data = [];//保存结果
                console.log(res);
                res.data.forEach((item, index) => {
                    data.push({
                        goodsId: item.id,
                        goodsCount: userCart[item.id],
                        goods: item
                    })
                });
                console.log(data);
                showUserCart(data);
            }, 'json');
        }
    }

    // 根据购物车数据实现显示商品信息
    function showUserCart(data) {
        console.log(data);
        let html = '';
        data.forEach((item, index) => {
            html += `
            <tr class="commodity">
                        <th><input type="checkbox" class="input" value="1"></th>
                        <th class="content"><img src="${item.goods.goodsThumb}" width="100px" height="100px">
                           <p>${item.goods.goodsName} </p>
                        </th>
                        <th><button type="button">
                              -
                           </button> <span>
                              ${item.goodsCount}
                           </span> <button type="button">
                              +
                           </button></th>
                        <th>
                           ￥${item.goods.shopPrice}
                        </th>
                        <th class="money">
                           ￥${item.goodsCount * item.goods.shopPrice}
                        </th>
                        <th><a href="javascript:;" class="glyphicon glyphicon-remove">删除
                           </a></th>
                     </tr>`;
        });
        $('.commodity').html(html);
    }
})

//在上面的功能中，当没有登录的情况下，先从localstorage中获取到了购物车数据，然后在通过购物车的商品ID调用接口得到商品信息，未登录状态下整个数据由2个变量构成，所以需要将两个变量的数据融合到一个变量中最后调用showUserCart函数进行渲染，由于目前showUserCart已经以登录状态下数据格式进行了显示，所以需要将未登录状态下的格式转换为登录状态的格式(数组中每个元素为对象，对象下存在goodsId、goodsCount、goods属性)
//在转换过程中建议以未登录下获取到商品的数据为基准进行循环
